<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="隐患名称" prop="htName">
        <el-input v-model="queryParams.htName" placeholder="请输入隐患名称" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="状态" prop="states">
        <el-radio-group v-model="queryParams.states">
          <el-radio label="1">待整改</el-radio>
          <el-radio label="2">延期待整改</el-radio>
          <el-radio label="d">已整改</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <!-- 列表 -->
    <el-table v-loading="loading" :data="list" stripe>
      <!--<el-table-column label="主键" align="center" prop="id" />-->
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column label="隐患名称" align="center" prop="htName" />
      <el-table-column label="隐患等级" align="center" prop="level">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.HT_LEVEL" :value="scope.row.level" />
        </template>
      </el-table-column>
      <el-table-column label="所属单位" align="center" prop="beCheckDept" />
      <el-table-column label="隐患描述" align="center" prop="description">
      </el-table-column>
      <el-table-column label="检查日期" align="center" prop="checkDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.checkDate, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="检查人" align="center" prop="checkPeo">
      </el-table-column>
      <el-table-column label="隐患状态" align="center" prop="state">
        <template slot-scope="scope">
          <el-button type="text" size="mini">
            <dict-tag :type="DICT_TYPE.HT_STATE" :value="scope.row.state" />
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="整改方式" align="center" prop="rectificationType">
        <template slot-scope="scope">
          <span v-if="scope.row.rectificationType==0">立即整改</span>
          <span v-if="scope.row.rectificationType==1">限期整改</span>
        </template>
      </el-table-column>
      <el-table-column label="整改期限" width="150" align="center" prop="rectificationLimit">
        <template slot-scope="scope">
          {{ parseTime(scope.row.rectificationLimit, "{y}-{m}-{d}") }}
        </template>
      </el-table-column>
      <el-table-column label="延期日期" width="150" align="center" prop="deferDate">
        <template slot-scope="scope">
          <span style="color: #E6A23C;">{{ parseTime(scope.row.deferDate, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="剩余时间" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.rectificationType==1&&scope.row.state==1">{{getTime(parseTime(new Date(), "{y}-{m}-{d}"),parseTime(scope.row.rectificationLimit, "{y}-{m}-{d}"))}}天</span>
          <span v-if="scope.row.rectificationType==1&&scope.row.state==2">{{getTime(parseTime(new Date(), "{y}-{m}-{d}"),parseTime(scope.row.deferDate, "{y}-{m}-{d}"))}}天</span>
          <span v-if="scope.row.rectificationType==0">0天</span>
        </template>
      </el-table-column>
      <el-table-column label="整改责任人" align="center" prop="rectificationPeo">
      </el-table-column>
      <el-table-column label="延期申请人" align="center" prop="deferApplyPeo">
      </el-table-column>
      <el-table-column label="延期审批人" align="center" prop="deferApprovePeo">
      </el-table-column>
      <el-table-column label="延期审批日期" align="center" prop="deferApproveDate">
        <template slot-scope="scope">
          <span style="color: #E6A23C;">{{ parseTime(scope.row.deferApproveDate, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="延期审批结果" align="center" prop="deferApproveResult">
      </el-table-column>
      <el-table-column label="审批拒绝原因" align="center" prop="deferApproveInfo">
      </el-table-column>
      <el-table-column label="操作" align="center" width="170" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit-outline" v-if="scope.row.state=='1'&&scope.row.rectificationType=='1'" @click="handleDetail(scope.row)"
           >申请延期</el-button>
          <el-button v-if="scope.row.state==1||scope.row.state==2" size="mini" type="text" icon="el-icon-edit" @click="handle(scope.row)"
            >整改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <!-- 整改弹窗 -->
    <el-dialog title="隐患整改" :visible.sync="open" width="750px" append-to-body>
      <el-form ref="form" :model="form" label-width="115px" :rules="rules1">
        <el-descriptions class="margin-top" :column="2" border>
          <el-descriptions-item>
            <template slot="label">
              隐患名称
            </template>
            {{form.htName}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              隐患等级
            </template>
            <dict-tag :type="DICT_TYPE.HT_LEVEL" :value="form.level" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              隐患描述
            </template>
            {{form.description}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              检查类型
            </template>
            <dict-tag :type="DICT_TYPE.CHECK_TYPE" :value="form.checkType" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              隐患地点
            </template>
            {{form.place}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              检查人
            </template>
            {{form.checkPeo}}
            </el-select>
          </el-descriptions-item>
          <!-- <el-descriptions-item>
            <template slot="label">
              所属风险点
            </template>
            {{form.checkPeoId}}
          </el-descriptions-item> -->
          <el-descriptions-item>
            <template slot="label">
              所属单位
            </template>
            {{form.checkDept}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              整改方式
            </template>
            {{form.rectificationType==0?'立即整改':'限期整改'}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              整改责任人
            </template>
            {{form.rectificationPeo}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              整改责任单位
            </template>
            {{form.rectificationDept}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              整改期限
            </template>
            {{ parseTime(form.rectificationLimit, "{y}-{m}-{d}") }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              剩余时间
            </template>
            <span v-if="form.rectificationType==1&&form.state==1">{{getTime(parseTime(new Date(), "{y}-{m}-{d}"),parseTime(form.rectificationLimit, "{y}-{m}-{d}"))}}天</span>
            <span v-if="form.rectificationType==1&&form.state==2">{{getTime(parseTime(new Date(), "{y}-{m}-{d}"),parseTime(form.deferDate, "{y}-{m}-{d}"))}}天</span>
            <span v-if="form.rectificationType==0">0天</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              整改前
            </template>
            <el-image v-for="item in form.ossImg" style="width: 100px; height: 100px;" :src="item.url"  :preview-src-list="[item.url]"/>
          </el-descriptions-item>

        </el-descriptions>
        <el-row>
          <el-col :span="24">
            <el-form-item label="整改后:" prop="rectificationOssImg">
              <imageUpload v-model="form.rectificationOssImg" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="整改完成时间:" prop="rectificationDate">
              <el-date-picker style="width: 180px;" v-model="form.rectificationDate" type="date"
                              placeholder="选择日期" :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="附件:" prop="ossFile">
              <fileUpload v-model="form.ossFile" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="整改结果:" prop="rectificationResult">
              <el-input type="textarea" v-model="form.rectificationResult" :rows="3" placeholder="请输入整改结果"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="confirmRecification" type="primary">确 认</el-button>
        <el-button @click="resetForm('form')">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 延期申请弹窗 -->
    <el-dialog title="整改延期申请" :visible.sync="openDetail" width="750px" append-to-body>
      <el-form ref="form2" :model="form2" label-width="100px" :rules="rules2">
        <el-descriptions class="margin-top" :column="2" border>
          <el-descriptions-item>
            <template slot="label">
              隐患名称
            </template>
            {{form2.htName}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              隐患等级
            </template>
            <dict-tag :type="DICT_TYPE.HT_LEVEL" :value="form2.level" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              隐患描述
            </template>
            {{form2.description}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              检查类型
            </template>
            <dict-tag :type="DICT_TYPE.CHECK_TYPE" :value="form2.checkType" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              隐患地点
            </template>
            {{form2.place}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              检查人
            </template>
            {{form2.checkPeo}}
            </el-select>
          </el-descriptions-item>
          <!-- <el-descriptions-item>
            <template slot="label">
              所属风险点
            </template>
            {{form.checkPeoId}}
          </el-descriptions-item> -->
          <el-descriptions-item>
            <template slot="label">
              所属单位
            </template>
            {{form2.checkDept}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              整改方式
            </template>
            {{form2.rectificationType==0?'立即整改':'限期整改'}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              整改责任人
            </template>
            {{form2.rectificationPeo}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              整改责任单位
            </template>
            {{form2.rectificationDept}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              整改期限
            </template>
            {{ parseTime(form2.rectificationLimit, "{y}-{m}-{d}") }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              剩余时间
            </template>
            <span>{{getTime(parseTime(new Date(), "{y}-{m}-{d}"),parseTime(form2.rectificationLimit, "{y}-{m}-{d}"))}}天</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              整改前
            </template>
            <el-image v-for="item in form2.ossImg" style="width: 100px; height: 100px;" :src="item.url"  :preview-src-list="[item.url]"/>
          </el-descriptions-item>
        </el-descriptions>
        <el-row>
          <el-col :span="12">
            <el-form-item label="延期日期:" prop="deferDate">
              <el-date-picker v-model="form2.deferDate" type="date" placeholder="选择日期" :picker-options="pickerOptions2">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="延期审批人" prop="deferApprovePeoId">
              <el-select style="width: 100%;" v-model="form2.deferApprovePeoId" placeholder="请选择审批人">
                <el-option v-for="item in users" :key="parseInt(item.id)" :label="item.nickname"
                           :value="parseInt(item.id)" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="延期原因:" prop="deferApplyInfo">
              <el-input type="textarea" v-model="form2.deferApplyInfo" :rows="3" placeholder="请输入延期原因"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="confirmRecification1" type="primary">确 认</el-button>
        <el-button @click="resetForm2('form2')">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import ElRow from "element-ui/packages/row/src/row";
  import {
    updateHtHiddentroubleRectify,
    getHtHiddentroubleRectify,
    getHtHiddenRectifyPage,
    getHtHiddenRectifyDeferApply
  } from "@/api/biz/htHiddenRectification";
  import {
    listSimpleUsers
  } from "@/api/system/user";
  export default {
    name: "HtHiddentrouble",
    components: {
      ElRow
    },
    data() {
      return {
        users:undefined,
        pickerOptions:{},
        pickerOptions2:{},
        // 遮罩层
        loading: false,
        // 导出遮罩层
        exportLoading: false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 隐患信息列表
        list: [{
          htName: '1'
        }],
        // 弹出层标题
        title: "隐患整改",
        // 是否显示弹出层
        open: false,
        openDetail: false,
        dateRangeCheckDate: [],
        // 查询参数
        queryParams: {
          pageNo: 1,
          pageSize: 10,
          states:'1'
        },
        // 表单参数
        form: {
          rectificationDate: ''
        },
        form2: {},

        // 表单校验
        rules2: {
          deferDate: [{
            required: true,
            message: "延期日期不能为空",
            trigger: "blur"
          }],
          deferApplyInfo: [{
            required: true,
            message: "延期原因不能为空",
            trigger: "blur"
          }],
          deferApprovePeoId:[{
            required: true,
            message: "延期审批人不能为空",
            trigger: "change"
          }],
        },
        rules1: {
          rectificationDate: [{
            required: true,
            message: "整改完成时间不能为空",
            trigger: "change"
          }],
          rectificationOssImg: [{
            required: true,
            message: "整改后不能为空",
            trigger: "change"
          }],
          rectificationResult: [{
            required: true,
            message: "整改结果不能为空",
            trigger: "blur"
          }],
        }
      };
    },
    created() {
      this.getList();
      // 获得用户列表
      listSimpleUsers().then(response => {
        this.users = response.data;
      });
    },
    methods: {
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNo = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      getTime(date1, date2) { //计算剩余天数
        var a1 = Date.parse(new Date(date1));
        var a2 = Date.parse(new Date(date2));
        var day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24)); //核心：时间戳相减，然后除以天数
        return day
      },
      resetForm(formName) {
        this.open = false
        this.$refs[formName].resetFields();
      },
      resetForm2(formName) {
        this.openDetail = false
        this.$refs[formName].resetFields();
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        // 处理查询参数
        let params = {
          ...this.queryParams
        };
        // this.addBeginAndEndTime(params, this.dateRangeCheckDate, 'checkDate');
        // 执行查询
        getHtHiddenRectifyPage(params).then(response => {
          this.list = response.data.list;
          this.total = response.data.total;
          this.loading = false;
        });
      },
      // 申请延期
      handleDetail(row) {
        const id = row.id;
        this.title = "隐患整改"
        getHtHiddentroubleRectify(id).then(response => {
          this.form2 = response.data;
          this.getdisabled2(this.form2.rectificationLimit);
          this.openDetail = true
        });
      },
      //禁止日期范围
      getdisabled2(date) {
        this.pickerOptions2= Object.assign({},this.pickerOptions2,{
          disabledDate(time){
            return time.getTime() <= new Date(date).getTime();  //如果date格式是2020-7-23或者2020/7/23。这里还是需要转成时间戳。把date改成new Date(date).getTime()
          }
        })
      },
      //禁止日期范围
      getdisabled(date) {
        this.pickerOptions= Object.assign({},this.pickerOptions,{
          disabledDate(time){
            return time.getTime() > new Date(date).getTime();  //如果date格式是2020-7-23或者2020/7/23。这里还是需要转成时间戳。把date改成new Date(date).getTime()
          }
        })
      },
      handle(row) { //隐患整改
        const id = row.id;
        getHtHiddentroubleRectify(id).then(response => {
          this.form = response.data;
          this.getdisabled(this.form.rectificationLimit);
          this.open = true;
          // this.form.rectificationDate = new Date()
        });
      },
      //确认隐患整改
      confirmRecification() {
        this.$refs["form"].validate(valid => {
          if (!valid) {
            return;
          }
          // 修改的提交
          if (this.form.id != null) {
            updateHtHiddentroubleRectify(this.form).then(response => {
              this.$modal.msgSuccess("隐患整改修改成功");
              this.open = false
              this.getList();
            });
            return;
          }
        });

      },
      //延期申请
      confirmRecification1() {
        this.$refs["form2"].validate(valid => {
          if (!valid) {
            return;
          }
          // 修改的提交
          if (this.form2.id != null) {
            getHtHiddenRectifyDeferApply(this.form2).then(response => {
              this.$modal.msgSuccess("申请成功");
              this.openDetail = false
              this.getList();
            });
            return;
          }
        });

      },
      /** 取消按钮 */
      cancel() {
        this.open = false;
      },

      /** 提交按钮 */
      submitForm() {
        this.open = false
      },
    }
  };
</script>
<style scoped>
  /deep/ .el-input--medium .el-input__inner {
    border: none;
  }

  /deep/.el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    border: 1px solid #e9e9e9;
    border-radius: 3px;
  }

  /deep/ .detail .el-col-12 {
    border: 0.5px solid #e9e9e9;
  }

  /deep/.el-select>.el-input {
    border: 1px solid #e9e9e9;
    border-radius: 3px;
  }

  /deep/ .el-form-item {
    margin: 10px;
  }

  /deep/ .el-dialog__body {
    padding-top: 0;
  }
</style>
